<template>
  <div class="bed-wrap">
    <div class="bed-top">
      <div class="bed-item active">
        <span class="bed-item-img">
          <img src="@/assets/bed-home/home-top1.png" alt="" />
        </span>
        智慧中心
      </div>
      <el-tooltip class="tooltip-wrap" placement="bottom">
        <div slot="content">
          温馨提示：<br/>
          房间状态：绿色代表有人入住，灰色代表房间未住满，蓝色代表房间有人预约<br/>
          床位状态：蓝色代表有人在床，黄色床位代表有人尿床<br/>
          灯光状态：绿色代表房间内已绑定设备,灰色代表房间未绑定设备,黄色代表房间内灯打开了<br/>
         </div>
        <img src="@/assets/images/bj-icon2.png" >
      </el-tooltip>
    </div>
    <div class="bed-content">
      <div class="bed-left">
        <div class="bed-left-item" v-for="item in floorData" :key="item.id" :class="{'active': currentFloorView == item.id}" @click="handleChangeFloor(item)">{{ item.name }}</div>
      </div>
      <div class="bed-right">
        <el-row :gutter="20" class="zsx-wrap">
          <el-col v-for="(item,index) in roomList" :key="item.id" class="m-20" :xs="24" :sm="24" :md="12" :lg="8">
            <div class="care-list care-jujia-list">
            	<div class="care-item">
            		<div class="care-header care-jujia" :class="{'colorType0': item.device && item.device.length, 'colorType1': item.onoff == 'on' || item.onoff1 == 'on'}">
            			<span>{{ item.name }}</span>
            			 <button v-if="item.device && item.device.length" type="button" @click="devicebind(item, index)">设备列表</button>
            		</div>
            		<div class="care-content">
            			<div class="care-room">
            				<div class="care-room-name">卧室</div>
            				<div class="care-room-right">
            					<img src="@/assets/home/light.png" alt="">
            					<img v-show="false" src="@/assets/home/light-active.png" alt="">
            					<span>开/关</span>
            					<div class="switch-box">
            					    <div class="bg_con">
            					        <input :id="`checked_${item.id}`" type="checkbox" :checked="item.onoff == 'on'" class="switch" value="0" />
            					        <label :for="`checked_${item.id}`" @click="handleLabel(item)">
            										<span></span>
            									</label>
            					    </div>
            					</div>
            				</div>
                    <img v-if="item.yanwu" src="@/assets/bed-home/bj-icon4.png" alt="">
            			</div>
                  <!-- <div class="care-room">
                  	<div class="care-room-name">卫生间</div>
                  	<div class="care-room-right">
                  		<img src="@/assets/home/light.png" alt="">
                  		<img v-show="false" src="@/assets/home/light-active.png" alt="">
                  		<span>开/关</span>
                  		<div class="switch-box">
                  		    <div class="bg_con">
                  		        <input :id="`checked_${item.id}_${item.id}`" :checked="item.onoff1 == 'on'" type="checkbox" class="switch" value="0" />
                  		        <label :for="`checked_${item.id}_${item.id}`" @click="handleToiletLabel(item)">
                  							<span></span>
                  						</label>
                  		    </div>
                  		</div>
                  	</div>
                    <img v-if="item.sos" src="@/assets/bed-home/bj-icon2.png" alt="">
                    <img v-if="item.shuijin" style="" src="@/assets/bed-home/bj-icon5.png" alt="">
                    <img v-if="item.hongwai" src="@/assets/images/m_p.png" alt="">
                    <div v-if="item.menci" class="room-door" :class="{'room-jujia-door-move1': item.menci == 1,'room-jujia-door-move2': item.menci == 2}"></div>
                  </div> -->
            		</div>
            	</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-for="item in roomList" :key="item.id">
            <!-- colorType1 -->
            <div class="room-item colorType2">
              <div class="room-top">
                <div class="room-top-left">
                  <span></span>
                  <div>{{ item.name }}</div>
                </div>
                <div class="room-top-right">
                  <!-- colorBedType1 -->
                  <div class="room-right-item" :class="{'colorBedType2': ite.on_bed == 1, 'colorBedType1': ite.is_wet == 1}" v-for="ite in item.bed_list" :key="ite.id">
                    <div class="room-right-item-left">
                      <div class="rml-top">
                        <span></span>
                        {{ ite.bed_code }}床
                      </div>
                      <!-- bedstatus2 -->
                      <div class="rml-bot" :class="{'bedstatus2': ite.status == 2, 'bedstatus3': ite.status == 0 || ite.status == 3}">
                        {{
                          ite.status == 1
                            ? "床位空闲"
                            : ite.status == 2
                            ? "有人入住"
                            : "有人预约"
                        }}
                      </div>
                    </div>
                    <div class="room-right-item-right">
                      <p>老人姓名：{{ ite.elder && ite.elder.name || '暂无' }}</p>
                      <p>老人性别：{{ ite.elder && (ite.elder.sex == 1 ? '男' : ite.elder.sex == 2 ?'女' : "暂无") }}</p>
                      <p>老人年龄：{{ ite.elder && ite.elder.age || '暂无' }}</p>
                      <p v-if="item.id == 3">老人心率：{{ ite.xinlv }}</p>
                      <p v-if="item.id == 3">老人呼吸：{{ ite.huxi }}</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="room-bottom">
                <div class="room-title-bed">{{item.bedname}}</div>
                <div v-if="item.carer_list && item.carer_list.length" class="room-carer">
                  护工：<span v-for="(carer, caindex) in item.carer_list" :key="caindex">{{ carer && carer.name }} {{ caindex+1 == item.carer_list.length ? '' : '，' }}</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :xs="24" :sm="24" :md="24" :lg="8">
            <div class="room-jujia-wrap">
            	<div class="room-title">
            		<div class="room-name">
            			<span>木床/自理型800.00元/月</span>
            			<span>房号：居家自理室</span>
            		</div>
            		<div class="room-person-name">
            			<div></div>
            			<div>
            				姓名：李某
            			</div>
            		</div>
            	</div>
            	<div class="room-jujia-bed" :class="{'colorType0': code5_onbed == 1, 'colorType1': code5_iswet == 1}"></div>
            	<img src="@/assets/zsx/women.png" class="room-jujia-laoren" :class="{'jujia-laoren-move1': code5_onbed == 1, 'jujia-laoren-move2': code5_onbed == 2, 'jujia-laoren-move3': code5_onbed == 3, 'jujia-laoren-move4': code5_onbed == 4}">
            	<img src="@/assets/zsx/jujiaxing.png" class="room-jujia-bg" />
            	<span class="room-jujia-door" :class="{'room-jujia-door-move1': doorMove == 2, 'room-jujia-door-move2': doorMove == 1}"></span>
            	<img v-show="!Jujialight" src="@/assets/zsx/imgs/light.png" class="room-jujia-light" />
            	<img v-show="Jujialight" src="@/assets/zsx/imgs/light-active.png" class="room-jujia-light-active" />
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8">
            <div class="room-jiehu-wrap" style="position: relative;">
            	<div class="room-title">
            		<div class="room-name">
            			<span>摇床/介护型1000.00元/月</span>
            			<span>房号：介助介护培训室</span>
            		</div>
            		<div class="room-person-name">
            			<div></div>
            			<div>
            				姓名：赵某
            			</div>
            		</div>
            	</div>
            	<div class="room-jiehu-bed" :class="{'colorType0': code6_onbed == 1, 'colorType1': code6_iswet == 1}"></div>
            	<img src="@/assets/zsx/women.png" class="room-jiehu-laoren" :class="{'jiehu-laoren-move1': code6_onbed == 1, 'jiehu-laoren-move2': code6_onbed == 2}" />
            	<img src="@/assets/zsx/jiezhujiehu.png" class="room-jiehu-bg" />
            	<img v-show="!Jiehulight" src="@/assets/zsx/imgs/light.png" class="room-jiehu-light" />
              <img v-show="Jiehulight" src="@/assets/zsx/imgs/light-active.png" class="room-jiehu-light-active" />
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8">
            <div class="room-shineng-wrap">
            	<div class="room-title">
            		<div class="room-name">
            			<span>智能护理床/全护型1200.00元/月</span>
            			<span>房号：失能失智照护培训室</span>
            		</div>
            		<div class="room-person-name">
            			<div>
            				<span>心率：<span style="font-size: 20px;" class="room-xinlv">{{xinlv}}</span></span>
            				<span>呼吸：<span style="font-size: 20px;" class="room-huxi">{{huxi}}</span></span>
            			</div>
            			<div>
            				姓名：张某
            			</div>
            		</div>
            	</div>
            	<div class="room-shineng-bed" :class="{'colorType0': code7_onbed == 1, 'colorType1': code7_iswet == 1}"></div>
            	<img src="@/assets/zsx/women.png" class="room-shineng-laoren" />
            	<img src="@/assets/zsx/shinengshizhi.png" class="room-shineng-bg"  />
            	<img v-show="!shinenglight" src="@/assets/zsx/imgs/light.png" class="room-shineng-light" />
            	<img v-show="shinenglight" src="@/assets/zsx/imgs/light-active.png" class="room-shineng-light-active" />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 尉氏县 -->
    <el-dialog
      title="已设备绑定列表"
      :visible.sync="dialogVisibleysxEq"
      width="50%"
      :before-close="closeDialogEq"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <div class="table-do">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              已绑定设备列表
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-table
              ref="table"
              :data="binddeviceList"
              :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
              :row-class-name="tableRowClassName"
            >
              <el-table-column
                v-for="(item, index) in ysxtableColumns"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :formatter="item.formatter"
                :filters="item.filters"
                :class-name="item.className"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
               v-if="adminType == 9"
                label="操作"
                fixed="right"
                width="220"
              >
                <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.type == '1' || scope.row.type == '7'"
                    size="mini"
                    type="primary"
                    plain
                    @click="handleysxEdit(scope.row, 'on', scope.$index)"
                  >
                    打开
                  </el-button>
                  <el-button
                    v-if="scope.row.type == '1' || scope.row.type == '7'"
                    size="mini"
                    type="danger"
                    plain
                    @click="handleysxEdit(scope.row, 'off', scope.$index)"
                  >
                    关闭
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import * as Api_ysxroom from "@/api/ysxroom";
  import { mapGetters } from "vuex"
  export default {
    name: "BadNum",
    data() {
      return {
        //楼栋列表信息
        buildingData: [],
        //楼层列表信息
        floorData: [
          {
            id: 1,
            name: "第1层"
          },
          {
            id: 2,
            name: "第2层"
          }
        ],
        //房间列表信息
        roomList: [],
        //目前的楼栋
        currentView: 0,
        //目前的楼层
        currentFloorView: 2,
        dialogVisibleysxEq: false,
        binddeviceList: [],
        ysxtableColumns: [
          { prop: "host_id", label: "网关id" },
          { prop: "name", label: "设备名称" },
          { prop: "type", label: "设备类型", formatter: this.genderFormatter },
        ],
        code5_onbed: 0,
        code5_iswet: 0,
        code6_onbed: 0,
        code6_iswet: 0,
        code7_onbed: 0,
        code7_iswet: 0,
        xinlv: 0,
        huxi: 0,
        Jujialight: false,
        Jiehulight: false,
        shinenglight: false,
        doorMove: 1
      };
    },
    computed: {
      ...mapGetters({
        adminType: "user/type"
      }),
      webSocketMsg() {
        return this.$store.state.websocket.webSocketMsg
      }
    },
    beforeDestroy() {},
    watch:{
        webSocketMsg:{
          handler: function(newVal) {
            this.init(newVal, this)
          }
        }
    },
    mounted() {
      this.ysxBoxinfo();
    },
    methods: {
      init(res, _that){
        let result = JSON.parse(res)
        if(!result) {
          return false
        }
        if(result.route == 'box_device_onoff') {
          let data = result.data;
          if(data.type == 1) {
            if(data.status == 'on') {
              _that.roomList.forEach((item, index) => {
                item.device.forEach((ite, idx) => {
                  if(ite.type == 1 && ite.code == data.device_id) {
                    _that.$set(_that.roomList[index], 'onoff', 'on');
                    _that.$set(_that.roomList[index].device[idx], 'onoff', 'on');
                    if(item.id == 1) {
                      _that.Jujialight = true;
                    } else if(item.id == 2) {
                      _that.Jiehulight = true;
                    } else if(item.id == 3) {
                      _that.shinenglight = true;
                    }
                  }
                })
              })
            } else {
              let devIndex = 1;
              _that.roomList.forEach((item, index) => {
                item.device.forEach((ite, idx) => {
                  if(ite.type == 1 && ite.code == data.device_id) {
                    devIndex = index;
                    _that.$set(_that.roomList[index].device[idx], 'onoff', 'off');
                  }
                })
              })
              _that.$set(_that.roomList[devIndex], 'onoff', 'off');
              _that.Jujialight = false;
              _that.Jiehulight = false;
              _that.shinenglight = false;
              _that.roomList[devIndex].device.forEach((item, index) => {
                if(item.type == 1 && item.onoff == 'on') {
                  _that.$set(_that.roomList[devIndex], 'onoff', 'on');
                  if(item.room_id == 1) {
                    _that.Jujialight = true;
                  } else if(item.room_id == 2) {
                    _that.Jiehulight = true;
                  } else if(item.room_id == 3) {
                    _that.shinenglight = true;
                  }
                }
              })
            }
          }
          if(data.type == 5) {
            if(data.status == 1) {
              this.code5_onbed = 3;
            } else {
              this.code5_onbed = 4;
            }
          }
          if(data.type == 3) {
            if(data.status == "on") {
              this.doorMove = 1;
            } else {
              this.doorMove = 2;
            }
          }
          if(data.type == 11) {
            _that.roomList.forEach((ite, idx) => {
              ite.bed_list.forEach((m, n) => {
                m.bed_device.forEach((x, y) => {
                  if(x.code == data.device_id) {
                    //在床
                    if(data.status[1].value == 0) {
                      _that.$set(_that.roomList[idx].bed_list[n], 'on_bed', 1)
                    } else { //离床
                      _that.$set(_that.roomList[idx].bed_list[n], 'on_bed', 0)
                    }
                    //未尿床
                    if(data.status[2].value == 0) {
                      _that.$set(_that.roomList[idx].bed_list[n], 'is_wet', 0)
                    } else { //尿湿
                      _that.$set(_that.roomList[idx].bed_list[n], 'is_wet', 1)
                    }
                  }
                })
              })
            })
            // 116 居家自理室
            if(data.device_id == 'cd112100116') {
              if(data.status[1].value == 0) { //在床
                this.code5_onbed = 1;
              } else { //离床
                this.code5_onbed = 2;
              }
              if(data.status[2].value == 0) { //未尿床
                this.code5_iswet = 0;
              } else { //尿湿
                this.code5_iswet = 1;
              }
            }
            // 104 介助介护室
            if(data.device_id == 'cd112100104') {
              if(data.status[1].value == 0) { //在床
                this.code6_onbed = 1;
              } else { //离床
                this.code6_onbed = 0;
              }
              if(data.status[2].value == 0) { //未尿床
                this.code6_iswet = 0;
              } else { //尿湿
                this.code6_iswet = 1;
              }
            }
          }
          if(data.type == 12) {
            _that.roomList.forEach((ite, idx) => {
              ite.bed_list.forEach((m, n) => {
                m.bed_device.forEach((x, y) => {
                  if(x.code == data.device_id) {
                    //心率
                    _that.$set(_that.roomList[idx].bed_list[n], 'xinlv', data.status[5].value)
                    //呼吸
                    _that.$set(_that.roomList[idx].bed_list[n], 'huxi', data.status[6].value)
                    if(data.status[4].value == 1) {//离床
                      _that.$set(_that.roomList[idx].bed_list[n], 'on_bed', 0)
                    } else if(data.status[4].value != 100) {  //在床
                      _that.$set(_that.roomList[idx].bed_list[n], 'on_bed', 1)
                    }
                    //未尿床
                    if(data.status[2].value == 0) {
                      _that.$set(_that.roomList[idx].bed_list[n], 'is_wet', 0)
                    } else { //尿湿
                      _that.$set(_that.roomList[idx].bed_list[n], 'is_wet', 1)
                    }
                  }
                })
              })
            })
            if(data.device_id == 'sm102100115') {
              this.xinlv = data.status[5].value;
              this.huxi = data.status[6].value;
              if(data.status[4].value == 1) { //离床
                this.code7_onbed = 0;
              } else if(data.status[4].value != 100){ //在床
                this.code7_onbed = 1;
              }
              if(data.status[2].value == 0) { //未尿床
                this.code7_iswet = 0;
              } else { //尿湿
                this.code7_iswet = 1;
              }
            }
          }
        }
      },
      //卧室开关
      handleLabel(item) {
        Api_ysxroom.ysxBoxAllonoff({room_id: item.id, type: 1, onoff: item.onoff == 'on' ? 'off' : 'on'})
      },
      //厕所开关
      handleToiletLabel(item) {
        item.device_list.length && item.device_list.forEach(ite => {
          if(ite.area_type == 2 && ite.type == 1) {
            getdevOnoff('get', {room_id: item.id, area_type: 2, onoff: ite.onoff == 'on' ? 'off' : 'on'})
          }
        })
      },
      //切换楼层
      handleChangeFloor(item) {
        this.currentFloorView = item.id;
      },
      //打开灯光等
      handleysxEdit(item, onoff) {
        Api_ysxroom.ysxBoxonff({device_id: item.code, onoff})
      },
      //获取房间信息
      ysxBoxinfo() {
        Api_ysxroom.ysxBoxinfo().then(res => {
          let data = res.data.room;
          data.forEach((item,index) => {
            item.onoff = "off";
            item.onoff1 = "off";
            item.bed_list = [];
            if(index == 0) {
              item.bedname = '木床/自理型800.00元/月'
            } else if(index == 1) {
              item.bedname = '摇床/介护型1000.00元/月'
            } else if(index == 2) {
              item.bedname = '智能护理床/全护型1200.00元/月'
            }
            item.device.forEach(ite => {
              if(ite.type == 11 || ite.type == 12) {
                item.bed_list.push({
                  bed_code: "01",
                  bed_device: [ite],
                  e_id: 0,
                  elder: [],
                  huxi: item.huxi,
                  id: index,
                  is_cd: item.is_cd,
                  is_sm: item.is_sm,
                  is_wet: item.is_wet,
                  on_bed: item.on_bed,
                  status: 2,
                  xinlv: item.xinlv
                })
              }
               // "介助介护培训室"
              if(ite.code == "cd112100104") {
                this.code6_onbed = item.on_bed;
                this.code6_iswet = item.is_wet;
              }
              // "居家自理室"
              if(ite.code == "cd112100116") {
                this.code5_onbed = item.on_bed;
                this.code5_iswet = item.is_wet;
              }
              // "失能失智照护培训室"
              if(ite.code == "sm102100115") {
                this.code7_onbed = item.on_bed;
                this.code7_iswet = item.is_wet;
                this.xinlv =  item.xinlv;
                this.huxi = item.huxi;

              }
              if(ite.type == 1) {
                if(ite.onoff == 'on') {
                  if(ite.area_type == 2) {
                    item.onoff1 = 'on';
                  } else {
                    item.onoff = 'on';
                  }
                }
              }
              if(ite.type == 2) {
                if(ite.onoff == '1') {
                  item.keran = true;
                } else {
                  item.keran = false;
                }
              }
              if(ite.type == 3) {
                if(ite.onoff == 'on') {
                  item.menci = 2;
                } else if(ite.onoff == 'off') {
                  item.menci = 1;
                } else {
                  item.menci = 3;
                }
              }
              if(ite.type == 4) {
                if(ite.onoff == '1') {
                  item.keran = true;
                } else {
                  item.keran = false;
                }
              }
              if(ite.type == 5) {
                if(ite.onoff == '1') {
                  item.hongwai = true;
                } else {
                  item.hongwai = false;
                }
              }
              if(ite.type == 6) {
                if(ite.onoff == '1') {
                  item.yanwu = true;
                } else {
                  item.yanwu = false;
                }
              }
              if(ite.type == 7) {
                item.chuanglian = false;
              }
              if(ite.type == 8) {
                if(ite.onoff == '1') {
                  item.shuijin = true;
                } else {
                  item.shuijin = false;
                }
              }
              if(ite.type == 9) {
                item.wenshi = false;
              }
              if(ite.type == 10) {
                if(ite.onoff == '1') {
                  item.anfang = true;
                } else {
                  item.anfang = false;
                }
              }
            })
          })
          this.roomList = data;
        })
      },
      //获取情景列表
      tableRowClassName({row}) {
        if (row.onoff == 'on' || row.onoff == 1) {
          return 'warning-row';
        }
        return '';
      },
      //查看设备列表
      devicebind(item, index) {
        let list = item?.device || [];
        this.binddeviceList = list;
        this.dialogVisibleysxEq = true;
        this.$nextTick(() => {
          this.$refs.table.doLayout()
        })
      },
      //关闭弹窗
      closeDialogEq() {
        this.dialogVisibleysxEq = false;
      },
      //设备类型
      genderFormatter(row) {
        let type = ""
        switch (row.type) {
          case 1:
            type = "灯"
            break;
          case 2:
            type = "SOS"
            break;
          case 3:
            type = "门禁"
            break;
          case 4:
            type = "可燃气体"
            break;
          case 5:
            type = "人体红外传感"
            break;
          case 6:
            type = "烟雾"
            break;
          case 7:
            type = "窗帘"
            break;
          case 8:
            type = "漏水检测"
            break;
          case 9:
            type = "温湿度检测"
            break;
          case 10:
            type = "安防报警"
            break;
          case 11:
            type = "床垫报警"
            break;
        }
        return type
      },
    },
  };
</script>
<style lang="scss" scoped>
  .dialog-main {
    .table-do {
      margin-bottom: 15px;
    }

    ::v-deep {
      th {
        .cell {
          color: #fff;
        }
      }
    }
  }
  .el-table{
    ::v-deep {
      .warning-row {
        background: oldlace;
      }
    }
  }
  .tooltip-wrap{
    width: 30px;
    position: absolute;
    right: 20px;
    top: 10px;
  }
  .bed-wrap{
    background-color: #0A1E3D;
    min-height: calc(100vh - 65px) !important;
    // 头部css
    .bed-top{
      position: relative;
      padding-left: 20px;
      width: 100%;
      height: 55px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      background: #16325D;
      box-sizing: border-box;
      box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.35);
      .active{
        .bed-item-img{
          background: url(../../assets/bed-home/home-top-bg2.png) no-repeat;
          background-size: 100%;
        }
      }
      .bed-item{
        display: flex;
        align-items: center;
        color: #ffffff;
        font-size: 16px;
        cursor: pointer;
        &:nth-child(n+2) {
          margin-left: 23px;
        }
        &:hover{
          .bed-item-img{
            background: url(../../assets/bed-home/home-top-bg2.png) no-repeat;
            background-size: 100%;
          }
        }
        img{
          width: 13px;
          height: 14px;
        }
      }
      .bed-item-img{
        display: inline-block;
        width: 29px;
        height: 34px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 5px;
        background: url(../../assets/bed-home/home-top-bg1.png) no-repeat;
        background-size: 100%;
      }
    }
    // 头部css end
    // 内容css start
    .bed-content{
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      .bed-left{
        .bed-left-item{
          width: 77px;
          height: 35px;
          background: url(../../assets/bed-home/home-left2.png) no-repeat;
          background-size: 100%;
          display: flex;
          align-items: center;
          padding-left: 10px;
          cursor: pointer;
          font-size: 14px;
          color: #ffffff;
          &:hover{
            background: url(../../assets/bed-home/home-left1.png) no-repeat;
            background-size: 100%;
          }
          &:nth-child(n+2) {
            margin-top: 5px;
          }
        }
        .active{
          background: url(../../assets/bed-home/home-left1.png) no-repeat;
          background-size: 100%;
        }
      }
      .bed-right{
        flex: 1;
        margin-left: 10px;
        margin-top: -10px;
      }

      .room-item{
        width: 100%;
        height: 350px;
        background: url(../../assets/bed-home/home-bg2.png) no-repeat;
        background-size: 100% 100%;
        padding: 11px;
        box-sizing: border-box;
        margin: 10px 0;
        .room-top{
          height: 195px;
          display: flex;
          justify-content: center;
          align-items: center;
          .room-top-left{
            text-align: center;
            span{
              display: inline-block;
              width: 38px;
              height: 34px;
              background: url(../../assets/bed-home/home1.png) no-repeat;
              background-size: 100%;
            }
            div{
              font-size: 23px;
              color: #ffffff;
              margin-top: 6px;
            }
          }
          .room-top-right{
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 10px 0;
            padding-top: 12px;
            margin-left: 10px;
            box-sizing: border-box;
            scrollbar-width: none; /* firefox */
            -ms-overflow-style: none; /* IE 10+ */
            &::-webkit-scrollbar {
              display: none; /* Chrome Safari */
            }
            .room-right-item{
              display: flex;
              justify-content: flex-start;
              align-items: center;
              padding: 10px;
              &:nth-child(n+2) {
                margin-top: 10px;
              }
            }
            .room-right-item-left{
              .rml-top{
                color: #fff;
                font-size: 16px;
                line-height: 16px;
                span{
                  margin-right: 15px;
                  display: inline-block;
                  width: 14px;
                  height: 16px;
                  background: url(../../assets/bed-home/bed-man1.png) no-repeat;
                  background-size: 100%;
                  vertical-align: middle;
                }
              }
              .rml-bot{
                margin-top: 7px;
                width: 68px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                background: #64c13d;
                border: 1px solid #64c13d;
                border-radius: 3px;
                font-size: 14px;
                color: #ffffff;
              }
              //有人入住
              .bedstatus2{
                // color: #FFB400;
                // background: #FFF3D4;
                // border: 1px solid #FEEBBA;
                color: #ffffff;
                background: #1890ff;
                border: 1px solid #1890ff;
              }
              //有人预约
              .bedstatus3{
                color: #0082FF;
                background: #E8F4FF;
                border: 1px solid #BDDFFE;
              }
            }
            .room-right-item-right{
              margin-left: 25px;
              p{
                font-size: 15px;
                color: #FFFFFF;
                line-height: 13px;
                &:nth-child(n+2) {
                  margin-top: 11px;
                }
              }
            }
          }

        }
        .room-bottom{
          margin-top: 13px;
          padding-top: 32px;
          .room-title-bed {
              font-size: 20px;
              line-height: 19px;
              color: #fff;
              text-align: center;
          }
          .room-carer {
              font-size: 16px;
              color: #fff;
              line-height: 16px;
              text-align: center;
              margin-top: 12px;
          }
          .room-action{
            margin-top: 10px;
            display: flex;
            justify-content: center;
            button{
              width: 86px;
              height: 26px;
              text-align: center;
              line-height: 26px;
              border-radius: 5px;
              box-sizing: border-box;
              font-size: 13px;
              outline: none;
              cursor: pointer;
              &:nth-child(n+2) {
                margin-left: 20px;
              }
            }
            .room-success{
              background: #E8F4FF;
              color: #0082FF;
              border: 1px solid #BDDFFE;
            }
            .room-danger{
              background: #FFDFDF;
              border: 1px solid #FEB6B6;
              color: #FF1515;
            }
          }
        }
      }
      //房间有人预约
      // .colorType1{
      //   background: url(../../assets/bed-home/home-bg1.png) no-repeat;
      //   background-size: 100% 100%;
      //   .room-top{
      //     .room-top-left{
      //        span{
      //          background: url(../../assets/bed-home/home2.png) no-repeat;
      //          background-size: 100%;
      //        }
      //     }
      //   }

      // }

      //房间有人住满
      .colorBedType2 {
        background-color: rgb(43 113 222) !important;
        border-radius: 10px !important;
        .rml-top{
          color: #FFA200 !important;
          span{
            background: url(../../assets/bed-home/bed-man2.png) no-repeat !important;
            background-size: 100% !important;
          }
        }
      }
      //在床
      .colorType2{
        background: url(../../assets/bed-home/home-bg3.png) no-repeat;
        background-size: 100% 100%;
        .room-top{
          .room-top-left{
             span{
               background: url(../../assets/bed-home/home3.png) no-repeat;
               background-size: 100%;
             }
          }
        }
      }
      //尿床
      .colorBedType1 {
        background-color: rgb(150 184 13) !important;
        border-radius: 10px !important;
        .rml-top{
          color: #FF455B !important;
          span{
            background: url(../../assets/bed-home/bed-man3.png) no-repeat !important;
            background-size: 100% !important;
          }
        }
      }

      //灯光控制
      .zsx-wrap{
        .colorType0 {
        	background: #15A189;
        }

        .colorType1 {
        	background: #F2AF4D;
        }
      }
      .care-list {
      	border-radius: 10px;
      }
      .care-header {
      	position: relative;
      	display: flex;
      	align-items: center;
      	color: #fff;
      	height: 70px;
      	line-height: 70px;
      	padding: 0 20px;
      	border-top-left-radius: 10px;
      	border-top-right-radius: 10px;
        background-color: #666666;
        button{
          width: 68px;
          height: 23px;
          background: #FFFFFF;
          border-radius: 2px;
          color: #F2AF4D;
          font-size: 13px;
          text-align: center;
          line-height: 23px;
          outline: none;
          border: none;
          cursor: pointer;
        }
      }

      .care-header span {
      	flex: 1;
      	text-align: left;
      	font-size: 20px;
      }

      .care-room {
      	position: relative;
      	padding: 0 20px;
      	height: 90px;
        &:nth-child(2) {
          border-top: 1px solid #d2d2d2;
        }
      }
      .care-room,
      .care-wc {
        position: relative;
      	display: flex;
      	align-items: center;
      	justify-content: flex-start;
        box-sizing: border-box;
        .room-door{
          width: 6px;
          height: 90px;
          background-color: #999999;
          position: absolute;
          right: 0;
          bottom: 0;
          transition: all 2s;
          &::after{
            content: "";
            display: block;
            width: 6px;
            height: 48px;
            background-color: #F5F5F5;
            position: absolute;
            top: 18px;
            left: 0;
          }
          &::before{
            content: "";
            display: block;
            width: 47px;
            height: 4px;
            background: #FFFFFF;
            border: 1px solid #999999;
            position: absolute;
            top: 18px;
            left: -49px;
            transform: rotateZ(270deg);
            z-index: 1;
            transform-origin: right 0%;
          }
        }
      }

      .care-room>img {
      	width: 30px;
        margin-left: 5px;
      	// transform: rotateZ(270deg);
      	// position: absolute;
       //  right: 40px;
       //  bottom: 26px;
      }

      .care-room-name,
      .care-wc-name {
        width: 60px;
      	height: 100%;
      	font-size: 20px;
      	color: #333333;
      	text-align: center;
      	    display: flex;
      	    align-items: center;
      }

      .care-wc-right,
      .care-room-right {
      	padding-left: 15px;
      	position: relative;
      	display: flex;
      	justify-content: space-between;
      	align-items: center;
      	font-size: 20px;
      	color: #999999;
      }

      .care-room-right img{
      	/* position: absolute; */
      	width: 15px;
      	margin-right: 6px;
      }

      .care-room-right span{
      	margin-right: 11px;
      }

      .care-content {
        position: relative;
      	background-color: #F5F5F5;
      	// height: 180px;
      	border-bottom-left-radius: 10px;
      	border-bottom-right-radius: 10px;
      	box-shadow: 0px 3px 6px rgb(0 0 0 / 23%);
      }

      .care-content > img{
        width: 30px;
        // transform: rotateZ(270deg);
        position: absolute;
        right: 40px;
        bottom: 26px;
      }

      /* switch开关 start */
      .switch-box{
          width: 70px;
      }
       .switch-box .switch{
          display:none;
      }
       .switch-box label{
          position:relative;
          display: block;
          padding: 1px;
          border-radius: 24px;
          height: 22px;
          background-color: #eee;
          cursor: pointer;
          vertical-align: top;
          -webkit-user-select: none;
      }
       .switch-box label:before{
          content: '';
          display: block;
          border-radius: 24px;
          height: 22px;
          background-color: #ABAFB3;
      		box-shadow: inset 0px 0px 2px #a19898;
          -webkit-transform: scale(1, 1);
          -webkit-transition: all 0.3s ease;
      }
       .switch-box label:after{
          content: '';
          position: absolute;
          top: 50%;
          left: 8px;
          margin-top: -14px;
          width: 28px;
          height: 28px;
          border-radius: 22px;
          background-color: #DDDFE0;
          box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);
      		transform: translateX(-9px);
      		-webkit-transform: translateX(-9px);
      		-ms-transform:translateX(-9px);
      		-moz-transform: translateX(-9px);
      		transition: all 0.3s ease;
      		-ms-transition: all 0.3s ease;
      		-moz-transition: all 0.3s ease;
          -webkit-transition: all 0.3s ease;
      }

      .switch-box label span{
      	position: absolute;
      	width: 13px;
      	height: 13px;
      	left: 7px;
      	top: 5px;
      	border-radius: 50%;
      	background-color: #B5B8BB;
      	z-index: 1;
      	transition: all 0.28s ease;
      	-ms-transition: all 0.28s ease;
      	-moz-transition: all 0.28s ease;
      	-webkit-transition: all 0.28s ease;
      }
       .switch-box .switch:checked~label:after{
      		transform: translateX(34px);
          -webkit-transform: translateX(34px);
      		-ms-transform: translateX(34px);
      		-moz-transform: translateX(34px);
      }
       .switch-box .switch:checked~label:before{
          background-color: #FC4B00;

      		box-shadow: inset 0px 0px 4px #e58181, 0px 0px 5px #d64541;
      }

       .switch-box .switch:checked~label span{
          background-color: #FC4B00;
      		/* left: 50px; */
      		transform: translateX(43px);
      		-webkit-transform: translateX(43px);
      		-ms-transform: translateX(43px);
      		-moz-transform: translateX(43px);
      	}
      /* switch开关 end */
      @media (min-width: 1200px) and (max-width: 1600px) {
      	.col-lg-3 {
      		width: 33.3%;
      	}
      }
    }
  }


  .room-shineng-wrap,
  .room-jiehu-wrap,
  .room-jujia-wrap {
  	position: relative;
    .colorType0 {
    	background: #2b71de;
    }

    .colorType1 {
    	background: #F2AF4D;
    }
  }

  .room-jujia-bg,
  .room-jiehu-bg,
  .room-shineng-bg {
  	width: 100%;
  	position: relative;
  }

  .wsj-jujia-light,
  .wsj-jujia-light-active {
  	position: absolute;
  	z-index: 1;
  	width: 8%;
  	top: 65%;
  	left: 37%;
  }

  .room-jiehu-light,
  .room-jiehu-light-active {
  	position: absolute;
  	z-index: 1;
  	width: 5%;
  	bottom: 18%;
  	left: 8%;
  }


  .room-jujia-light,
  .room-jujia-light-active {
  	position: absolute;
  	z-index: 1;
  	width: 5%;
  	top: 24%;
  	left: 44%;
  }

  .room-shineng-light,
  .room-shineng-light-active {
  	position: absolute;
  	z-index: 1;
  	width: 6%;
  	bottom: 5%;
  	left: 8%;
  }

  .room-title {
  	width: 100%;
  	background-color: #15A189;
  	height: 101px;
  	color: #FFFFFF;
  	padding: 20px;
  	font-size: 18px;
  	border-radius: 10px 10px 0px 0px;
    box-sizing: border-box;
  }

  .room-name{
  	display: flex;
  	justify-content: space-between;
  }

  .room-person-name {
  	margin-top: 12px;
  	display: flex;
  	justify-content: space-between;
  }

  .room-person-name div span:nth-child(2) {
  	display: inline-block;
  	margin-left: 20px;
  }

  .room-jujia-door {
  	position: absolute;
  	bottom: 5%;
  	left: 68%;
  	z-index: 1;
  	width: 9%;
  	height: 4px;
  	background: #FFFFFF;
  	border: 1px solid #707070;
  	transform-origin: 0% bottom;
  }

  .room-jujia-door-move1{
  	animation: move1 3s;
  	-webkit-animation: move1 3s;
  	animation-fill-mode: forwards;
  	-webkit-animation-fill-mode: forwards;
  	animation-timing-function: linear;
  	-webkit-animation-timing-function: linear;
  }

  .room-jujia-door-move2{
  	animation: move2 3s;

  	-webkit-animation: move2 3s;
  	animation-fill-mode: forwards;
  	-webkit-animation-fill-mode: forwards;
  	animation-timing-function: linear;
  	-webkit-animation-timing-function: linear;
  }


  /*旋转从0度到360度*/
  @keyframes move1 {
  		from {
  				transform: rotate(0deg);
  		}
  		to {
  				transform: rotate(-90deg);
  		}
  }

  @keyframes move2 {
  		from {
  				transform: rotate(-90deg);
  		}
  		to {
  				transform: rotate(0deg);
  		}
  }

  .room-jujia-laoren {
  	position: absolute;
  	top: 83%;
  	left: 24%;
  	width: 5%;
  	z-index: 2;
  }

  /* 客厅 -> 床上 */
  .jujia-laoren-move1 {
  	top: 83%;
  	left: 24%;
  	animation: myFirst 5s;
  	-webkit-animation: myFirst 5s;
  	animation-fill-mode: forwards;
  	-webkit-animation-fill-mode: forwards;
  	animation-timing-function: linear;
  	-webkit-animation-timing-function: linear;
  }

  @keyframes myFirst {
  	0% {
  		top: 83%;
  		left: 24%;
  	}

  	35% {
  		top: 83%;
  		left: 61%;
  	}

  	75% {
  		top: 43%;
  		left: 61%;
  	}

  	100% {
  		top: 43%;
  		left: 76%;
  	}
  }

  @-webkit-keyframes myFirst {
  	0% {
  		top: 83%;
  		left: 24%;
  	}

  	35% {
  		top: 83%;
  		left: 61%;
  	}

  	75% {
  		top: 43%;
  		left: 61%;
  	}

  	100% {
  		top: 43%;
  		left: 76%;
  	}
  }

  /* 床上 -> 客厅 */
  .jujia-laoren-move2 {
  	top: 23%;
  	left: 22%;
  	animation: mySecond 5s;
  	-webkit-animation: mySecond 5s;
  	animation-fill-mode: forwards;
  	-webkit-animation-fill-mode: forwards;
  	animation-timing-function: linear;
  	-webkit-animation-timing-function: linear;
  }

  @keyframes mySecond {
  	0% {
  		top: 43%;
  		left: 76%;
  	}
  	35% {
  		top: 43%;
  		left: 61%;
  	}
  	75% {
  		top: 83%;
  		left: 61%;
  	}
  	100% {
  		top: 83%;
  		left: 24%;
  	}
  }

  @-webkit-keyframes mySecond {
  	0% {
  		top: 43%;
  		left: 76%;
  	}
  	35% {
  		top: 43%;
  		left: 61%;
  	}
  	75% {
  		top: 83%;
  		left: 61%;
  	}
  	100% {
  		top: 83%;
  		left: 24%;
  	}
  }

  /* 客厅 -> 卫生间 */
  .jujia-laoren-move3 {
  	top: 83%;
  	left: 24%;
  	animation: myThird 5s;
  	-webkit-animation: myThird 5s;
  	animation-fill-mode: forwards;
  	-webkit-animation-fill-mode: forwards;
  	animation-timing-function: linear;
  	-webkit-animation-timing-function: linear;
  }

  @keyframes myThird {
  	0% {
  		top: 83%;
  		left: 24%;
  	}

  	100% {
  		top: 83%;
  		left: 77%;
  	}
  }

  @-webkit-keyframes myThird {
  	0% {
  		top: 83%;
  		left: 24%;
  	}

  	100% {
  		top: 83%;
  		left: 77%;
  	}
  }

  /* 卫生间 -> 客厅 */
  .jujia-laoren-move4 {
  	top: 75%;
  	left: 34%;
  	transform: rotateY(180deg);
  	animation: myFour 5s;
  	-webkit-animation: myFour 5s;
  	animation-fill-mode: forwards;
  	-webkit-animation-fill-mode: forwards;
  	animation-timing-function: linear;
  	-webkit-animation-timing-function: linear;
  }

  @keyframes myFour {
  	0% {
  		top: 83%;
  		left: 77%;
  	}

  	100% {
  		top: 83%;
  		left: 24%;
  	}
  }

  @-webkit-keyframes myFour {
  	0% {
  		top: 83%;
  		left: 77%;
  	}

  	100% {
  		top: 83%;
  		left: 24%;
  	}
  }

  .room-jujia-bed {
  	width: 17%;
  	height: 20%;
  	position: absolute;
  	z-index: 1;
  	left: 74%;
  	top: 38%;
  }

  .room-jiehu-bed {
  	position: absolute;
  	z-index: 1;
  	width: 23.5%;
  	height: 23%;
  	top: 30%;
  	left: 25%;
  }


  .room-jiehu-laoren {
  	width: 6%;
  	position: absolute;
  	z-index: 1;
  	left: 34%;
  	top: 67%;
  }

  /* 客厅 -> 床上 */
  .jiehu-laoren-move1 {
  	left: 34%;
  	top: 67%;
  	animation: myFive 3s;
  	-webkit-animation: myFive 3s;
  	animation-fill-mode: forwards;
  	-webkit-animation-fill-mode: forwards;
  	animation-timing-function: linear;
  	-webkit-animation-timing-function: linear;
  }

  @keyframes myFive {
  	0% {
  		left: 34%;
  		top: 67%;
  	}

  	100% {
  		left: 34%;
  		top: 36%;
  	}
  }

  @-webkit-keyframes myFive {
  	0% {
  		left: 34%;
  		top: 67%;
  	}

  	100% {
  		left: 34%;
  		top: 36%;
  	}
  }

  /* 床上 -> 客厅 */
  .jiehu-laoren-move2 {
  	left: 34%;
  	top: 36%;
  	animation: myEight 3s;
  	-webkit-animation: myEight 3s;
  	animation-fill-mode: forwards;
  	-webkit-animation-fill-mode: forwards;
  	animation-timing-function: linear;
  	-webkit-animation-timing-function: linear;
  }

  @keyframes myEight {
  	0% {
  		left: 34%;
  		top: 36%;
  	}

  	100% {
  		left: 34%;
  		top: 67%;
  	}
  }

  @-webkit-keyframes myEight {
  	0% {
  		left: 34%;
  		top: 36%;
  	}

  	100% {
  		left: 34%;
  		top: 67%;
  	}
  }

  /* 客厅 -> 卫生间 */
  .jiehu-laoren-move3 {
  	left: 74%;
  	top: 33%;
  	animation: mySix 5s;
  	-webkit-animation: mySix 5s;
  	animation-fill-mode: forwards;
  	-webkit-animation-fill-mode: forwards;
  	animation-timing-function: linear;
  	-webkit-animation-timing-function: linear;
  }

  @keyframes mySix {
  	0% {
  		left: 74%;
  		top: 33%;
  	}

  	50% {
  		left: 104%;
  		top: 49%;
  	}

  	100% {
  		left: 68%;
  		top: 76%;
  	}
  }

  @-webkit-keyframes mySix {
  	0% {
  		left: 74%;
  		top: 33%;
  	}

  	50% {
  		left: 104%;
  		top: 49%;
  	}

  	100% {
  		left: 68%;
  		top: 76%;
  	}
  }


  /* 卫生间 -> 客厅 */
  .jiehu-laoren-move4 {
  	left: 68%;
  	top: 76%;
  	animation: mySeven 5s;
  	-webkit-animation: mySeven 5s;
  	animation-fill-mode: forwards;
  	-webkit-animation-fill-mode: forwards;
  	animation-timing-function: linear;
  	-webkit-animation-timing-function: linear;
  }

  @keyframes mySeven {
  	0% {
  		left: 68%;
  		top: 76%;
  	}

  	50% {
  		left: 104%;
  		top: 49%;
  	}

  	100% {
  		left: 74%;
  		top: 33%;
  	}
  }

  @-webkit-keyframes mySeven {
  	0% {
  		left: 68%;
  		top: 76%;
  	}

  	50% {
  		left: 104%;
  		top: 49%;
  	}

  	100% {
  		left: 74%;
  		top: 33%;
  	}
  }


  .room-shineng-wrap,
  .room-jiehu-wrap,
  .room-jujia-wrap {
  	position: relative;
  }

  .room-shineng-laoren {
  	width: 7%;
  	position: absolute;
  	z-index: 1;
  	left: 47%;
  	top: 37%;
  }

  .room-shineng-bed {
  	position: absolute;
  	z-index: 1;
  	width: 31%;
  	height: 30%;
  	top: 32%;
  	left: 34.5%;
  }

  .room-shineng-num {
  	font-size: 16px;
  	color: #000000;
  	position: absolute;
  	left: 38%;
  	bottom: 5%;
  	width: 54%;
  }

  .room-shineng-num div {
  	display: inline-block;
  }

  .room-shineng-num div:nth-child(2) {
  	margin-left: 10px;
  }
</style>
